<%@include file="/include/header.jsp" %>
<%@include file="/include/headerBec.jsp" %>
<script>
    function save(){
        var form = document.getElementById("comentarioForm");
        form.cmd.value = "saveComment";
        form.id.value = "";
        if(validateForm() == true) {
            form.submit();
        }
    }
    
    function deleteComment(codigo){      
        
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
    
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height: 'auto',
            width: 490,
            modal: true,
            buttons: {
                Eliminar: function() {
                    $( this ).dialog( "close" );
                    var form = document.getElementById("comentarioForm");
                    form.cmd.value = "deleteComment";
                    form.id.value = codigo;
                    form.submit();
                },
                Cancelar: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        
    }
    
    function clean(){
        var form = document.getElementById("comentarioForm");
        form.comentario.value = "";
        form.id.value = "";
        form.cmd.value = "init";
        form.submit();
    }
    
    function validateForm() {
        var form = document.getElementById("comentarioForm");
        if(form.comentario.value.trim() == ""){
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        if(form.comentario.value.toString().length > 1500) {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message2" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        return true;
    }
    
</script>
                <div class="content">
                    <html:form action="/Comentario" styleId="comentarioForm">
                        <html:hidden property="cmd" value="" />
                        <html:hidden property="id" value="" />
                        <table border="0" class="form">
                            <caption class="titleSeg">Comentarios</caption>
                            <tr class="campos">
                                <td class="label">Comentario:&nbsp;&nbsp;</td>
                                <td class="control">
                                    <html:textarea property="comentario" cols="75" rows="5" />
                                </td>
                            </tr>
                            <tr class="botones">
                                <td colspan="2" align="left">
                                    <html:button property="guardar" value="Guardar" styleClass="button" onclick="save()" />
                                    <html:button property="limpiar" value="Limpiar" styleClass="button" onclick="clean()" />
                                </td>
                            </tr>
                        </table>
                        <br />
                    </html:form>
                    <logic:notEmpty name="commentsList">
                        <display:table pagesize="10" name="commentsList" class="results" id="results" style="width:80%;">
                            <display:column property="id" title="Eliminar?" decorator="com.uca.sisbec.decorators.ComentarioDecorator" />
                            <display:column property="comment" title="Comentario" style="width:80%;" />
                            <display:column property="dateTime" title="Fecha" />
                        </display:table>
                    </logic:notEmpty>
                    <!-- DIVS DE MENSAJES DE VALIDACIONES -->
                    
                    <div id="dialog-message" style="display: none" title="Advertencia">
                        <p>
                            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                            Debe escribir un comentario
                        </p>
                    </div>
                    
                    <div id="dialog-message2" style="display: none" title="Advertencia">
                        <p>
                            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                            El comentario es demasiado largo; se admite un m&aacute;ximo de 1500 caracteres incluyendo los espacios.
                        </p>
                    </div>
                    
                    <div style="height: 75px; display: none" id="dialog-confirm" title="&iquest;Eliminar Comentario?">
                        <table style="font-size: 13px;">
                            <tr>
                                <td><img src="./images/Warning.png" alt="Atenci&oacute;n" /></td>
                                <td style="text-align: justify">Va a eliminar su comentario, esta acci&oacute;n no se puede revertir. &iquest;Est&aacute; seguro que desea continuar?</td>
                            </tr>
                        </table>
                    </div>
                    
                    <!-- ******************************** -->
                </div>
<%@include file="/include/footerBec.jsp" %>
<%@include file="/include/footer.jsp" %>